<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul class="ul1">
        <li>C</li>
        <li>C++</li>
        <li>java</li>
        <li>python</li>
    </ul>
    <script>
//点击输出索引号
    //动态添加属性方法
        var lis=document.querySelector(".ul1").querySelectorAll("li");
        var lis=document.querySelector(".ul1").querySelectorAll("li");
        for(var i=0;i<lis.length;i++){
            lis[i].index=i;
            lis[i].onclick=function(){
                console.log(this.index);
            }
        }
    //闭包方法
        for(var i=0;i<lis.length;i++){
            (function(i){
                lis[i].onclick=function(){
                    console.log(i);
                }           
            })(i);
        }
//闭包方法计算打车价格
        var car=(function(){
            var start=13;
            var total=0;
            return{
                price:function(n){
                    if(n<=3){
                        total=13;
                    }else{
                        total=13+(n-3)*5;
                    }
                    return total;
                },
                yd:function(flag){
                    return flag ? total+10 : total;
                }
            }
        })();
        console.log(car .price(5));//不拥堵情况
        console.log(car.yd(true));//拥堵情况
//闭包方法三秒后输出所有li元素内容
        for(var i=0;i<lis.length;i++){
            (function(i){
                setTimeout(function() {
                   console.log(lis[i].innerHTML);
                }, 2000);
                }           
                )(i);
        }

    </script>
</body>
</html>